<template>
	<view class="proitem" style="margin-top: 20rpx;" @click="go('/pages/product/prodetail?title=商品详情&id='+pro.id)">
		<image class="pic" :src="pro.img" mode="aspectFill"></image>
		<view class="info">
			<view class="proname">
				{{pro.name}}
			</view>
			<view class="price">
				<text class="fs24 cfd2 fwb">￥</text>
				<text class="fs30 cfd2 fwb">{{pro.price}}</text>
				<text class="fs22 c919" v-if="pro.oldprice" style="margin-left: 8rpx;text-decoration: line-through;">￥{{pro.oldprice}}</text>
			</view>
			<view class="flex">
				<view class="tag">
					库存{{pro.num}}件
				</view>
				<view class="tag">
					月销{{pro.monethnum}}件
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "proitem",
		props:{
			pro: {
			    type: Object,
			    default() {
			        return {
						
					};
			    }
			}
		},
		
		data() {
			return {

			};
		},
		methods:{
			go(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less">
	.proitem {
		width: 345rpx;
	}

	.pic {
		width: 345rpx;
		height: 344rpx;
		border-radius: 15rpx 15rpx 0px 0px;
	}

	.info {
		width: 305rpx;
		padding: 20rpx;
		// height: 129rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 15rpx 15rpx;
		margin-top: -3px;

		.proname {
			color: #181818;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 30rpx;
			font-weight: bold;
		}

		.price {
			line-height: 30rpx;
			margin: 22rpx 0 12rpx;
		}

		.tag {
			padding: 4rpx 6rpx;
			border-radius: 5rpx;
			border: 2rpx solid #D9D9D9;
			font-size: 18rpx;
			color: #6A6A6A;
			width: fit-content;
			margin-right: 6rpx;
		}
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.jsb{
		justify-content: space-between;
	}
	.fs24 {
		font-size: 24rpx;
	}

	.fs30 {
		font-size: 30rpx;
	}

	.cfd2 {
		color: #FD2A00;
	}

	.fwb {
		font-weight: bold;
	}

	.fs22 {
		font-size: 22rpx;
	}

	.c919 {
		color: #919191;
	}
</style>
